<template>
    <div style="width: 300px;height:180px;position: relative" >
        <div class="mask" v-if="!isCanPlay">
            <div>视频暂时无法播放</div>
        </div>
        <div class="playButtonWrapper"  v-if="!controls">
            <div class="playButton" @click="playButtonClick"></div>
        </div>
        <video :id="id"
               :src="src"
               :poster="posterUrl"
               crossorigin="anonymous"
               :playsinline="true"
               :controls="controls"
               :style="styleVideo"
               :autoplay="autoplay"
               preload="auto"
               :muted="muted"
               :loop="loop"
               :volume="volume"
               :controlslist="controlsList"
               @load="loadVideo"
               @ended="ended"
               @loadeddata="loadeddata"
               @pause="pause"
               @play="play"
               @error="errorPlay"
        >

        </video>

        <div>
            <el-button @click="test">测试</el-button>
        </div>
    </div>
</template>

<script setup>
    import {ref,defineEmits,defineProps,onMounted,onUnmounted,reactive} from "vue";

    const props = defineProps({
        // src:{
        //     type:String,
        //     default:""
        // },
        id:{
            type:[String,Number],
            default:10000
        },
        needControls:{
            type:Boolean,
            default:false
        },
        autoplay:{
            type:Boolean,
            default:false
        },
        needMuted:{ // 是否静音
            type:Boolean,
            default:true
        },
        loop:{ // 是否循环
            type:Boolean,
            default:false
        },
        volume:{ // 是否循环
            type:Number,
            default:0.5
        },
        // aspectRatio="16:9"

    })

    let controlsList = "" // nodownload nofullscreen noplaybackrate
    let styleVideo = {
        width:"100%",
        height:"100%",
        objectFit:"fill" // contain cover none
    }
    //https://wecrestest.campusphere.net/activity/1019339096624724/attachment/6845522f20014080beeb4eb378812550/011240391719222417559.jpeg
    let posterUrl = ref("")
    let isCanPlay = ref(true)
    let src = ref("https://wecrestest.campusphere.net/activity/1019339096624724/attachment/29c69e5b9d5f475d887c5e507740a12b/trim.28378B22-52FE-4D66-BA07-1D2805AD5A8B.MOV")
    // fileName.substring(fileName.lastIndexOf(".")+1)
    // rawFileName?.split?.('.')?.slice?.(-1)?.join?.('')?.toLowerCase()

    const loadeddata = (v,index)=>{
        console.log("加载完成",v,index)
        // const video = document.getElementById(
        //     // `${o.target.getAttribute('id')}_html5_api`
        //     v.title+index
        // )
        const video = document.getElementById(props.id)
        video.play();
        video.pause();
        // 定义缩放比例
        const scale = 1
        // 创建canvas画布
        const canvas = document.createElement('canvas')
        // canvas宽高为video宽高*缩放比例
        canvas.width = video.videoWidth * scale
        canvas.height = video.videoHeight * scale
        // canvas画出视频封面
        canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height)
        const src = canvas.toDataURL('image/png')
        // console.log("src",src)
        // video.poster = src
        posterUrl.value = src
    }

    const ended = ()=>{
        console.log("播放結束")
    }
    const play = ()=>{
        console.log("播放開始")
    }
    const pause = ()=>{
        console.log("播放pause")
    }
    const loadVideo = ()=>{
        console.log("loadVideo")
        // 换视频源的时候使用

        // const video = document.getElementById(props.id)
        // video.src = "https://wecrestest.campusphere.net/activity/1019339096624724/attachment/29c69e5b9d5f475d887c5e507740a12b/trim.28378B22-52FE-4D66-BA07-1D2805AD5A8B.MOV"
        // video.load();
    }

    const errorPlay = ()=>{
        // 当视频加载或播放过程中发生错误时触发。
        console.log("errorPlay")
    }
    const test =()=>{
        console.log("test")
        // const video = document.getElementById(props.id)
        // video.play();
        console.log("loadVideo")

    }
    const playButtonClick = ()=>{
        console.log("playButtonClick")
        const video = document.getElementById(props.id)
        video.play();
        controls.value = true
    }
    let controls = ref(false);
    let muted = ref(true);
    // 初始化处理
    onMounted(()=>{
        // console.log(src.value.substring(src.value.lastIndexOf(".")+1))
        controls.value= props.needControls
        muted.value= props.needMuted

        let x = src.value.split?.('.')?.slice?.(-1)?.join?.('')?.toLowerCase()
        let typesArr = ['mp4','mov']

        if (!typesArr.includes(x)){
            ElMessage("不支持的视频格式") // 整个video不显示
            // const video = document.getElementById(props.id)
            // video.removeAttribute("poster")
            setTimeout(()=>{
                controls.value = false
                isCanPlay.value = false
            })


        }
    })
    onUnmounted(()=>{
        console.log("卸载")
    })
</script>

<style scoped>

 .mask{
     position: absolute;
     width: 100%;
     height: 100%;
     background-color: #000;
     z-index: 999999;
     display: flex;
     justify-content: center;
     align-items: center;
     color: #fff;
     font-size: 13px;
 }

 .playButtonWrapper{
     width: 100%;
     height: 100%;
     z-index: 999;
     color:#fff;
     position: absolute;
     /*background-color: #fff;*/

 }
 .playButton{
     position: absolute;
     top:35%;
     left: 45%;
     border-top: 20px red solid ;
     border-right: 22px red solid ;
     border-bottom: 21px red solid ;
     border-left: 30px red solid ;
     /*border-top: none;*/
     /*border-color: transparent transparent blue transparent*/
     border-color: transparent transparent transparent rgba(255,255,255,.9);

 }
 video{
     border-radius: 8px;
 }
</style>